import { global_delay_appear } from '../../../../DataDefine/sourceData';
import {
  ObjectOnlyPushSet,
  removeObjectOnlyPushSet,
  seekElement_attribute,
} from '../../../../Func/uniFunc/Func';
import { remove_class } from '../../../class_operate/Func';
import { listenCssVar_mana } from '../../../css/Func/listenCssVar/classes/cla_listenCssVar_mana';
import {
  css_disnone,
  css_wind_light,
  css_wind_light_hover,
  id_split,
} from '../../../DataDefine/sourceData';
import { create_ListenEvent_mana } from '../../../Event/listenEvent_mana';
// eslint-disable-next-line no-unused-vars
import { unit_listenEvent_mana } from '../../../Event/listenEvent_mana/Classes/cla_unit_listenEvent_mana';
import {
  appearEl_child_func,
  disappearEl_child_func,
  normalizeContainer,
  packNode,
} from '../../../Func';
import {
  css_prograss_bar_cssVar_curNum,
  css_prograss_bar_cssVar_totalNum,
} from '../../../prograss_bar/DataDefine/sourceData';
import {
  css_unit_item_selected,
  select_node_view_default_tag,
  sleect_node_uni_items_active_cla,
  spacename_select_node,
  special_keyVal,
  style_var_prop_grid_cloumn_num,
} from '../DataDefine/sourceData';
import { select_node_eventBind } from './cla_select_node_eventBind';
import { select_node_staticNode } from './cla_select_node_staticNode';

const select_node_dataManaTag = 'select_node_dataMana';

class select_node_dataMana extends select_node_staticNode {
  get [Symbol.toStringTag]() {
    return select_node_dataManaTag;
  }

  constructor(props) {
    super(props);
    this.only_one = props.only_one == true;

    this.cssVar_Obj_content_uni_items_border = new listenCssVar_mana(
      this.select_node_content_uni_items_border_dom
    );

    this.cssVar_prograss_obj = new listenCssVar_mana(
      this.select_node_quick_func_border_node
    );
  }
  /**
   * 只允许 一个 元素 选中
   */
  only_one;

  /**
   * 当前 选中的 项目 集
   */
  selected_items_cur = [];

  /**
   * 上次 选中的 项目 集
   */
  selected_items_last = [];

  /**
   * 事件 绑定 this
   */
  eventBind = new select_node_eventBind();

  /**
   * css var 列数 设置项
   */
  cssVar_Obj_content_uni_items_border;

  /**
   * 事件 监听管理
   */
  eventM = create_ListenEvent_mana(spacename_select_node);

  /**
   * 进度 cssVar 变量管理
   */
  cssVar_prograss_obj;

  /**
   * 将 内容元素 打包 到 浮动显示 元素中
   */
  pack_all_node_From_select_content_To_focusDisplay() {
    // 设置 变量 开方数
    let child_num =
      this.select_node_content_uni_items_border_dom.children.length;

    // 设置 元素 列数
    this.cssVar_Obj_content_uni_items_border.setCssVar(
      style_var_prop_grid_cloumn_num,
      sqrt_ceil_num(child_num)
    );
    if (this.only_one) {
      /**
       * 逻辑 修订
       * 当 只 需要 一个元素 选中时
       * 设置 为 1
       */
      this.cssVar_prograss_obj.setCssVar(css_prograss_bar_cssVar_totalNum, 1);
    } else {
      // 设置 进度 子元素 总数量
      this.cssVar_prograss_obj.setCssVar(
        css_prograss_bar_cssVar_totalNum,
        child_num
      );
    }

    // 设置 当前 子元素 已选中的 数量
    this.cssVar_prograss_obj.setCssVar(
      css_prograss_bar_cssVar_curNum,
      this.selected_items_last.length
    );

    do {
      const child_node = this.select_node_content_dom.firstElementChild;
      // 打包 元素 到 焦点元素
      packNode(this.focusDisplay_el_container, child_node);
    } while (this.select_node_content_dom.firstElementChild != null);
  }

  /**
   * 将 浮动显示 打包 到 内容元素 元素中
   */
  pack_all_node_From_focusDisplay_To_select_content() {
    do {
      const child_node = this.focusDisplay_el_container.firstElementChild;
      // 打包 元素 到 焦点元素
      packNode(this.select_node_content_dom, child_node);
    } while (this.focusDisplay_el_container.firstElementChild != null);
  }

  /**
   * 设置 当前 的 选中项
   * @param {string[]} arr
   */
  set_selected_items_cur(arr) {
    this.selected_items_cur = [...arr];
    this.selected_items_last = [...arr];
  }

  /**
   * 获取 上一次 的 选中项
   * @returns
   */
  get_selected_items_last() {
    return this.selected_items_last;
  }

  /**
   * 启用 选中 属性
   * @param {string} keyVal
   */
  selected_item_active(keyVal) {
    /**
     * 当前元素
     */
    let cur_keyVal_dom = this.get_keyVal_dom(keyVal);

    // 添加 active item class
    remove_class(cur_keyVal_dom, sleect_node_uni_items_active_cla, true);

    requestAnimationFrame(() => {
      cur_keyVal_dom.setAttribute(css_unit_item_selected, true);
      cur_keyVal_dom[css_unit_item_selected] = true;
    });
  }

  /**
   * 移除 选中 属性
   * @param {string} keyVal
   */
  selected_item_disActive(keyVal) {
    let cur_keyVal_dom = this.get_keyVal_dom(keyVal);
    cur_keyVal_dom.removeAttribute(css_unit_item_selected);
    cur_keyVal_dom[css_unit_item_selected] = undefined;
  }

  /**
   * 添加 当前 选中项 信息
   * @param {string} keyVal
   */
  selected_items_cur_push_KeyVal(keyVal) {
    ObjectOnlyPushSet(this.selected_items_cur, keyVal);
  }

  /**
   * 移除 当前 选中项 信息
   * @param {string} keyVal
   */
  selected_items_cur_remove_KeyVal(keyVal) {
    removeObjectOnlyPushSet(this.selected_items_cur, keyVal);
  }

  /**
   * 功能性函数
   * 用于 添加 或者 移除 keyVal
   * @param {string} keyVal 选中的 keyVal
   */
  dis_or_active_keyVal_node_func(keyVal) {
    // 已有 当前 keyVal 进行删除
    if (this.selected_items_cur.includes(keyVal)) {
      this.disactive_keyVal_node_func(keyVal);
    } else {
      this.active_keyVal_node_func(keyVal);
    }
  }

  /**
   * 应用 添加 keyVal 系列操作
   * @param {string} keyVal 选中的 keyVal
   */
  active_keyVal_node_func(keyVal) {
    this.selected_items_cur_push_KeyVal(keyVal);
    this.selected_item_active(keyVal);

    /**
     * 逻辑修订
     * 如果 只允许 一个元素 选中
     * 则 在 选中数据 超过 一个时 移除 之前的元素
     */
    if (this.only_one) {
      if (this.selected_items_cur.length > 1) {
        this.disactive_keyVal_node_func(this.selected_items_cur[0]);
      }
    }

    // 重置 当前 子元素 选中 进度信息
    this.cssVar_prograss_obj.setCssVar(
      css_prograss_bar_cssVar_curNum,
      this.selected_items_cur.length
    );
  }

  disactive_keyVal_node_func(keyVal) {
    this.selected_items_cur_remove_KeyVal(keyVal);
    this.selected_item_disActive(keyVal);

    // 重置 当前 子元素 选中 进度信息
    this.cssVar_prograss_obj.setCssVar(
      css_prograss_bar_cssVar_curNum,
      this.selected_items_cur.length
    );
  }

  /**
   * 用于 展示 当前选中的 uni
   */
  #display_view_operate() {
    let cur_keyVal_dom;
    if (this.selected_items_cur.length == 0) {
      this.select_node_view_selected_dom.innerHTML =
        select_node_view_default_tag;
      return;
    }
    this.select_node_view_selected_dom.innerHTML = '';
    for (const keyVal of this.selected_items_cur) {
      cur_keyVal_dom = this.get_keyVal_dom(keyVal).cloneNode(true);
      remove_class(cur_keyVal_dom, css_wind_light_hover);
      remove_class(cur_keyVal_dom, css_wind_light, true);
      packNode(this.select_node_view_selected_dom, cur_keyVal_dom);
    }
  }

  /**
   * 取消 当前 浮动 操作
   */
  #cancel_focusDisplay_operate() {
    disappearEl_child_func(this.focusDisplay_el, 'both', () => {
      this.pack_all_node_From_focusDisplay_To_select_content();
      this.focusDisplay_el.close();
    });
  }

  open_focusDisplay_func() {
    // 显示 浮动元素
    this.focusDisplay_el.showModal();

    this.#open_focusDisplay_operate();
  }

  /**
   * 显示 focusDisplay_el 动画
   */
  #open_focusDisplay_operate() {
    // 将元素 打包到 浮动元素
    this.pack_all_node_From_select_content_To_focusDisplay();

    appearEl_child_func(this.focusDisplay_el, 'both');

    /**
     * 逻辑修订
     * 在 元素 显示动画 会 出现 闪现 问题
     */
    remove_class(this.focusDisplay_el, css_disnone, true);

    setTimeout(() => {
      remove_class(this.focusDisplay_el, css_disnone);
    }, global_delay_appear);
  }

  /**
   * 取消 浮动 修改 系列操作
   */
  cancel_func() {
    // 取消 当前 选中
    while (this.selected_items_cur.length > 0) {
      const keyVal = this.selected_items_cur[0];
      this.dis_or_active_keyVal_node_func(keyVal);
    }

    // 添加 上次操作记录
    for (const keyVal of this.selected_items_last) {
      this.dis_or_active_keyVal_node_func(keyVal);
    }

    this.#cancel_focusDisplay_operate();
  }

  /**
   * 确认 浮动 修改 系列 操作
   */
  certain_func() {
    this.set_selected_items_cur(this.selected_items_cur);
    this.#display_view_operate();
    this.#cancel_focusDisplay_operate();
  }

  /**
   * 获取 相应 keyVal 元素
   * @param {string} keyVal
   * @returns
   */
  get_keyVal_dom(keyVal) {
    let id = this.props.keyVal_prefix + id_split + keyVal;
    return normalizeContainer(id);
  }

  /**
   * 获取 给定元素 或 父级元素 的 uni ketVal node
   * @param {HTMLElement} node
   * @returns
   */
  get_uni_keyVal_node(node) {
    let is_node = seekElement_attribute(node, special_keyVal);
    return is_node;
  }

  /**
   * 全选 功能
   */
  select_all_func() {
    if (this.only_one) {
      return;
    }
    for (const cur_keyVal_dom of this.select_node_content_uni_items_border_dom
      .children) {
      let keyVal = cur_keyVal_dom.getAttribute(special_keyVal);
      this.active_keyVal_node_func(keyVal);
    }
  }

  /**
   * 取消 当前 选择
   */
  restart_select_func() {
    while (this.selected_items_cur.length > 0) {
      const cur_keyVal = this.selected_items_cur[0];
      this.disactive_keyVal_node_func(cur_keyVal);
    }
  }
}

/**
 * 获取 平方根 并 向上取整
 * @param {Number} num
 * @returns
 */
function sqrt_ceil_num(num) {
  let sqrt_num = Math.sqrt(num);
  return Number.isInteger(sqrt_num) ? sqrt_num : Math.ceil(sqrt_num);
}

export { select_node_dataMana };
